<!-- 三级及以上评论 -->
<template>
  <div class="sub-reply-container" v-if="childComments && childComments.length">
    <div class="sub-reply" v-for="(child, index) in childComments" :key="index">
      <!-- 渲染内容 -->
      <div class="listbox-top-user">
        <el-avatar :size="30" :src="child.avatar" />
        <p>
          <span class="publisher">{{ child.publisherName }}</span>
          回复
          <span class="replay-to">@{{ parentName }}</span>
        </p>
      </div>
      <div class="listbox-middle-root">{{ child.content}}</div>
      <div class="listbox-comment-info">                  
        <div class="listbox-bottom">
          <div class="pubdate">{{ child.publishTime }}</div>             
          <div class="like" @click="handleLikeClick(child)">
            <svg v-if="child.isLiked" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><path d="M13.545733333333333 5.166653333333333L10.511766666666666 5.166653333333333C10.658033333333332 4.851813333333333 10.821733333333334 4.440706666666666 10.880833333333332 4.044453333333333C10.923233333333332 3.760413333333333 10.927266666666664 3.412493333333333 10.893133333333333 3.0813333333333333C10.859833333333334 2.7581999999999995 10.784866666666666 2.3969066666666663 10.6352 2.1132133333333334C10.318299999999999 1.5124266666666666 9.882166666666667 1.09052 9.357366666666666 0.9881599999999999C8.799166666666666 0.8792866666666665 8.318566666666666 1.1633 8.030966666666666 1.59852C7.7904333333333335 1.9625133333333333 7.6966 2.26618 7.611066666666667 2.5431266666666668L7.608366666666666 2.5519066666666665C7.526133333333332 2.817973333333333 7.4452333333333325 3.07934 7.237266666666667 3.4476933333333335C6.895133333333334 4.053713333333333 6.615993333333333 4.36802 6.240833333333333 4.69694C6.046326666666666 4.867473333333333 5.84366 4.974753333333333 5.666666666666666 5.03686L5.666666666666666 14.149866666666664C6.190953333333333 14.161133333333334 6.752166666666666 14.168266666666668 7.333333333333333 14.168266666666668C8.896066666666666 14.168266666666668 10.214966666666665 14.117266666666666 11.084633333333333 14.071433333333333C11.938133333333333 14.026433333333333 12.754100000000001 13.5962 13.1998 12.814466666666664C13.621066666666666 12.075666666666665 14.160633333333333 10.9572 14.485833333333334 9.619766666666667C14.7904 8.367233333333333 14.9174 7.348799999999999 14.968999999999998 6.656493333333334C15.032466666666666 5.8043733333333325 14.340166666666665 5.166653333333333 13.545733333333333 5.166653333333333zM4.666666666666666 14.122666666666667L4.666666666666666 5.166653333333333L3.5348733333333335 5.166653333333333C2.506193333333333 5.166653333333333 1.591813333333333 5.90056 1.4747533333333334 6.9655C1.4003066666666666 7.642799999999999 1.3333333333333333 8.523499999999999 1.3333333333333333 9.5016C1.3333333333333333 10.559333333333333 1.4116666666666666 11.540700000000001 1.4928399999999997 12.274533333333332C1.6048399999999998 13.287066666666664 2.43944 14.026599999999998 3.4350066666666668 14.073566666666666C3.78952 14.0903 4.205413333333333 14.107633333333332 4.666666666666666 14.122666666666667z" fill="#00AEEC"></path></svg>
            <svg v-else t="1753757868857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4524" width="16" height="16"><path d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z" p-id="4525" fill="#9499A0"></path></svg>
            <p>{{ child.likeCount }}</p>
          </div>
           <div class="dislike">
            <svg t="1753758155261" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5799" width="14" height="14"><path d="M128.192 223.68A103.04 103.04 0 0 1 231.552 128h510.72l6.976 0.128A103.04 103.04 0 0 1 845.44 215.04l49.344 316.8 0.96 8.128c1.92 27.136-7.04 54.08-25.344 74.688l-5.632 5.888-6.08 5.44a104.256 104.256 0 0 1-67.392 23.68H621.184v108.8l-0.192 7.808C616.896 838.72 556.096 896 481.92 896l-4.672-0.32a32 32 0 0 1-24.512-18.496L318.144 579.2H231.552l-6.784-0.192A102.912 102.912 0 0 1 128 476.8V230.4l0.192-6.72z m373.12 605.824l4.352-1.28 5.888-2.176a73.6 73.6 0 0 0 45.568-67.648v-140.8l0.32-4.288a32 32 0 0 1 31.68-27.712h202.496l5.12-0.192c10.048-1.152 19.2-5.76 25.664-13.184a37.632 37.632 0 0 0 9.088-30.72l-49.344-316.736-1.024-4.608-1.536-4.352A39.552 39.552 0 0 0 742.592 192h-371.84v348.288l130.56 289.28z m-194.496-637.44H231.552l-4.672 0.192A38.848 38.848 0 0 0 192 230.4v246.4l0.256 4.48c2.304 19.008 18.88 33.92 39.296 33.92h75.264V192z" fill="#9499A0" p-id="5800"></path></svg>
            <p>{{ child.dislikeCount }}</p>
          </div>
        <!-- 回复的是二级评论 -->
          <span class="reply" @click="handleReply(rootCommentId, child.commentId)">回复</span>
        </div>
    </div>

  
      <ChildComment
        :rootCommentId="rootCommentId"
        :childComments="child.childComments"
        :parentName="child.publisherName"
        @to-reply="handleReply"
      />
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
import { likeComment, cancelLikeComments }  from '@/api/user';
import { useUserStore } from '@/store/useUserStore';
import { storeToRefs } from 'pinia';

// 接收父组件传过来的值
const props = defineProps({
  childComments: {
    type: Array,
    default: [],
  },
  parentName: {
    type: String,
    reequire: true,
  },
  rootCommentId:{
    type: Number
  }
});
const childComments = props.childComments;
const parentName = props.parentName;

const userStore = useUserStore();
const { userInfo} = storeToRefs(userStore);

// 声明需要抛出的事件
const emit = defineEmits(["to-reply"]);

const handleReply = (rootCommentId, parentId) => {
 //父组件中回复一级评论与子级评论共用一个传值方法
 console.log("handleReply",rootCommentId,parentId)
  emit("to-reply", rootCommentId, parentId);
  
};

//评论点赞/取消点赞
const handleLikeClick= async(item)=>{
  const data={
    userId:userInfo.value.userId,
    commentId:item.commentId
  }
  try{
  if(!item.isLiked){
    item.likeCount+=1
    await likeComment(data)
    item.isLiked=true
  }
 else{
    item.likeCount-=1
    await cancelLikeComments(data)
    item.isLiked=false
  }
 }catch(e){
    console.log('评论点赞失败',e)
  }
}
onMounted(()=>{
  console.log(childComments)
})
</script>
<style lang="css" scoped>
.listbox-top-user{
  display: flex;
  align-items: center;
  font-size: 13px;
  gap: 10px;
}
.listbox-top-user .publisher{
  color: #9499A0;
}
.replay-to{
  color: #00AEEC;
}
.listbox-middle-root{
  font-size: 13px;
  line-height: 24px;
  color: #18191C;
  width: 100%;
  display: block;
  overflow: hidden;
  margin-left: 40px;
}
.listbox-comment-info{
  margin-left: 40px;
}
.listbox-comment-context{
  font-size: 13px;
  line-height: 24px;
  color: #18191C;
  width: 100%;
  display: block;
  overflow: hidden;
}
.listbox-bottom{
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 3px;
  font-size: 13px;
  color: #9499A0;
  gap: 20px;
}
.listbox-bottom .like{
  display: flex;
  align-items: center;
  gap:5px;
  cursor: pointer;
  }
.listbox-bottom .like:hover{
  color: #00AEEC;
  }
.listbox-bottom .dislike{
  display: flex;
  align-items: center;
  gap:5px;
  cursor: pointer;
}
.listbox-bottom .dislike:hover{
  color: #00AEEC;
  }
.listbox-bottom .reply{
 cursor: pointer;
}
.listbox-bottom .reply:hover{
  color: #00AEEC;
  }
</style>

